<template>
  <div class="mine-top" :class="{ 'mine-change': top }">
    <img src="../../assets/image/我的背景.jpg" alt="" />
    <div class="mine-head" @click="newshow('修改')"></div>
    <div class="mine-user">
      <span>Hi,{{ id }}</span>
      <i @click="newshow('修改')"></i>
    </div>
    <b @click="newshow('设置')"></b>
    <div class="mine-wihte"></div>
  </div>

  <div class="mine-list mine-list-b">
    <van-cell is-link v-for="item in mineList1" :key="item.src" @click="newshow(item.title)">
      <template #title>
        <img :src="item.img" alt="" />
        <span class="custom-title">{{ item.title }}</span>
      </template>
    </van-cell>
  </div>

  <div class="mine-list">
    <van-cell is-link v-for="item in mineList2" :key="item.src" @click="newshow(item.title)">
      <template #title>
        <img :src="item.img" alt="" />
        <span class="custom-title">{{ item.title }}</span>
      </template>
    </van-cell>
  </div>
  <div class="mine-list">
    <van-cell is-link v-for="item in mineList3" :key="item.src" @click="newshow(item.title)">
      <template #title>
        <img :src="item.img" alt="" />
        <span class="custom-title">{{ item.title }}</span>
      </template>
    </van-cell>
  </div>

  <van-popup v-model:show="show" round>
    <div class="mine-show">
      <span class="span-top">关注爱课公众号</span>
      <i class="i-top">您将获得以下集中特权</i>
      <div class="mine-show-1">
        <img src="../../assets/image/mine-img/学习.png" alt="" />
        <div class="mine-show-text">
          <span>学习资料</span>
          <i>课程资料在线下载</i>
        </div>
      </div>
      <div class="mine-show-1 mine-show-2">
        <img src="../../assets/image/mine-img/福利.png" alt="" />
        <div class="mine-show-text">
          <span>福利活动</span>
          <i>参与获得领取奖品</i>
        </div>
      </div>
      <div class="mine-show-1 mine-show-3">
        <img src="../../assets/image/mine-img/专属客服.png" alt="" />
        <div class="mine-show-text">
          <span>专属客服</span>
          <i>一对一客服答疑</i>
        </div>
      </div>
      <van-button type="primary" size="large" round @click="adderwei">关注爱课公众号</van-button>
      <div class="img-erwei" :class="{ 'change-img': changeerwei }">
        <img src="../../assets/image/Mineerweima.png" alt="" @click="del" />
        <span>使用微信扫一扫</span>
      </div>
    </div>
  </van-popup>
  <div class="bottom"></div>
</template>

<script>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { getMyInfoApi } from "../../utils/api";
// import { onMounted } from "vue";
export default {
  setup() {
    const show = ref(false);
    const mineList1 = ref([
      {
        img: require("../../assets/image/mine-img/邀请有礼.png"),
        title: "邀请有礼",
        router: "/invite",
      },
      {
        img: require("../../assets/image/mine-img/规划师.png"),
        title: "我的学习规划师",
        router: "",
      },
      {
        img: require("../../assets/image/mine-img/公众号.png"),
        title: "关注公众号",
        router: "",
      },
    ]);
    const mineList2 = ref([
      {
        img: require("../../assets/image/mine-img/课程.png"),
        title: "课程明细",
        router: "",
      },
      {
        img: require("../../assets/image/mine-img/兑换.png"),
        title: "课程兑换",
        router: "",
      },
      {
        img: require("../../assets/image/mine-img/钻石.png"),
        title: "钻石明细",
        router: "/vip",
      },
      {
        img: require("../../assets/image/mine-img/学习报告.png"),
        title: "学习报告",
      },
      {
        img: require("../../assets/image/mine-img/跟读.png"),
        title: "跟读作品",
      },
      {
        img: require("../../assets/image/mine-img/物流.png"),
        title: "物流详细",
      },
    ]);
    const mineList3 = ref([
      {
        img: require("../../assets/image/mine-img/设备.png"),
        title: "设备检测",
      },
      {
        img: require("../../assets/image/mine-img/帮助.png"),
        title: "帮助与反馈",
      },
    ]);

    const id = ref();
    const changeerwei = ref(false);

    const top = ref(false);

    let idToken = localStorage.getItem("token");

    const del = () => {
      changeerwei.value = false;
    };

    getMyInfoApi({ token: idToken }).then(res => {
      id.value = res.results.username ? res.results.username : res.results.phone;
    });

    const change = () => {
      let ab = document.querySelector(".mine-list-b");
      if (!ab) {
        return;
      }
      let adY = ab.offsetTop - document.documentElement.scrollTop;

      if (top.value) {
        if (adY >= 45) {
          top.value = false;
        }
      } else if (adY <= 60) {
        top.value = true;
      }
    };

    window.addEventListener("scroll", fn());

    function fn() {
      return function () {
        change();
      };
    }

    const adderwei = () => {
      changeerwei.value = true;
    };

    const router = useRouter();

    const newshow = el => {
      switch (el) {
        case "关注公众号":
          show.value = true;
          break;

        case "设备检测":
          router.push("/tests");
          break;

        case "设置":
          router.push("/setting");
          break;

        case "邀请有礼":
          router.push("/invite");
          break;

        case "钻石明细":
          router.push("/vip");
          break;

        case "修改":
          router.push("/reg2");
          break;
      }
    };

    return {
      mineList1,
      mineList2,
      mineList3,
      newshow,
      show,
      top,
      id,
      changeerwei,
      adderwei,
      del,
    };
  },
};
</script>

<style lang="less" scoped>
.mine-top {
  width: 375px;
  height: 252.5px;
  position: relative;

  > img {
    width: 375px;
    height: 252.5px;
    position: absolute;
    z-index: 10;
  }

  .mine-head {
    width: 110px;
    height: 108.8px;
    position: absolute;
    top: 60px;
    z-index: 100;
    background: url(../../assets/image/未标题-4.png) -283px -8px no-repeat;
    transform: scale(0.5);
  }
  > .mine-user {
    position: absolute;
    z-index: 200;
    top: 170.5px;
    left: 24px;
    display: flex;
    align-items: center;
    justify-content: center;

    > span {
      width: 150px;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      height: 26px;
      font-size: 26px;
      color: #fff;
    }

    > i {
      width: 46px;
      height: 47px;
      background: url(../../assets/image/未标题-2.png) -261px -123px no-repeat;
      transform: scale(0.5);
      margin-left: -10px;
    }
  }

  > b {
    width: 48px;
    height: 42px;
    z-index: 100;
    position: absolute;
    top: 45px;
    right: 10px;
    background: url(../../assets/image/未标题-2.png) -160px -123px no-repeat;
    transform: scale(0.5);
  }

  .mine-wihte {
    width: 375px;
    height: 15px;
    background: #fff;
    border-radius: 15px 15px 0 0;
    position: absolute;
    bottom: -1px;
    left: 0;
    z-index: 100;
  }
}

.van-cell__title {
  > img {
    width: 24px;
    height: 24px;
  }

  > .custom-title {
    position: absolute;
    margin-left: 10px;
    display: inline-block;
    font-weight: 700;
  }
}

.mine-list {
  padding: 15px 0;
  background: #fff;
  margin-bottom: 2px;
}

.mine-show {
  width: 276px;
  height: 375px;
  position: relative;

  span {
    font-size: 17px;
    font-weight: 700;
  }

  i {
    font-size: 12px;
    color: gray;
  }

  > .span-top {
    width: 138px;
    height: 17.5px;
    position: absolute;
    top: 30px;
    left: 75px;
  }

  > .i-top {
    width: 123px;
    height: 12px;
    position: absolute;
    top: 58px;
    left: 77px;
  }

  > .mine-show-1 {
    width: 100%;
    padding: 0 62px;
    position: absolute;
    top: 105px;
    display: flex;
    padding-bottom: 20px;

    > img {
      width: 31.5px;
      height: 38.5px;
    }

    > .mine-show-text {
      margin-left: 15px;
      display: flex;
      flex-direction: column;
    }
  }

  > .mine-show-2 {
    top: 172.5px;
  }

  > .mine-show-3 {
    top: 239px;
  }

  > .van-button {
    position: absolute;
    bottom: 20px;
    left: 25px;
    width: 225px;
  }
  > .img-erwei {
    display: none;
    width: 276px;
    height: 375px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 200;
    overflow: hidden;
    > img {
      // margin-left: -325px;
      // margin-top: -700px;
      // transform: scale(0.55);
      width: 100%;
      margin-top: 26px;
    }
    > span {
      position: absolute;
      top: 18px;
      left: 0;
      width: 100%;
      background: #fff;
      display: block;
      text-align: center;
    }
  }
  > .change-img {
    display: block;
  }
}

.bottom {
  width: 100%;
  height: 40px;
}

.mine-change {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 500;
  transform: translateY(-60%);

  .mine-head {
    top: 160px;
    left: -30px;
    transform: scale(0.25);
  }

  > .mine-user {
    top: 190px;
    left: 24px;

    > span {
      transform: scale(0.6);
    }

    > i {
      margin-left: -20px;
    }
  }

  > b {
    top: 190px;
    right: 10px;
  }
}
</style>
